<template>
    <div class="monitor-datas">
        <headTop :theRouter="therouter"></headTop>
        <div class="monitor-details">
            <div class="station-info">
                <div class="station-pic">
                    <img v-if="stationInfo.img_name!=='' && stationInfo.img_name!=='undefined'" :src="'./../static/img/'+stationInfo.img_name" alt="">
                    <img v-else src="../../static/img/no-img.png" alt="">
                </div>
                <div class="station-mesg">
                    <p class="station-name"> {{stationInfo.hy_name}}</p>
                    <p>所属河流：{{stationInfo.river_name}}</p>
                    <p>地理位置：{{stationInfo.com_locations}}</p>
                </div>
            </div>
        </div>
        <ul class="num-message fn-clear">
            <li>
                <i class="right-line"></i>
                <span class="flow-num"><em class="num-red">{{stationInfo.environmental}}</em>m³/s</span>
                <p class="flow-name">生态基流</p>
            </li>
            <li>
                <i class="right-line"></i>
                <span class="flow-num"><em class="num-red">{{stationInfo.min_flow}}</em>m³/s</span>
                <p class="flow-name">最小下泄量</p>
            </li>
            <li>
                <span class="flow-num"><em class="num-green">{{stationInfo.ecology_out_flow}}</em>m³/s</span>
                <p class="flow-name">实时监测流量</p>
            </li>
        </ul>
        <ul class="look-over">
            <li class="first-line">
                <i class="monitor-data"></i>监测数据
                <div class="select-model">
                    <button :key="list.id" v-for="(list,index) in buttons" @click="bg(index)" :class="{active:changebg == index}">{{list}}</button>
                </div>
            </li>
            <li>
                <i class="select-time"></i>时间选择
                <!-- 小时 -->
                <div class="change-time" v-if="chooseDay==0">
                    <span class="now-data">
                        <group>
                            <datetime v-model="value1" @on-change="changeHour"></datetime>
                        </group>
                    </span>
                </div>
                <!-- 天 -->
                 <div class="change-time"  v-else>
                    <!-- 结束时间 -->
                    <span class="now-data">
                        <group>
                            <datetime v-model="value3" @on-change="changeEnd"></datetime>
                        </group>
                    </span>
                    <!-- 开始时间 -->
                    <span class="now-data start-time">
                        <group>
                            <datetime v-model="value2" @on-change="changeStart"></datetime>
                        </group>
                    </span>
                </div>
            </li>
        </ul>
        <ul class="show-name fn-clear">
            <li class="one-w">序号</li>
            <li class="two-w">时间</li>
            <li class="three-w">监测流量</li>
        </ul>
        <div v-if="message == '暂无数据'" class="no-message">暂无数据</div>
        <div class="datas-show" v-else>
            <table class="datas-list">
                <tbody>
                    <tr :key="item.id" v-for="(item,index) in folwDatas">
                        <td width="20%">{{index+1}}</td>
                        <td width="52%">{{item.COLLECTION_TIME}}</td>
                        <td width="28%">{{item.REPLAY_BASE_FLOW}} m³/s</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>
<script>
import { BASEURL } from "./../api/api";
import axios from "axios";
import headTop from "./common/header";
import { Datetime, Group } from "vux";
export default {
  name: "login",
  components: {
    Datetime,
    Group,
    headTop
  },
  data() {
    return {
      stationInfo: {},
      buttons: ["小时", "天"],
      changebg: 0,
      mody: "1",
      chooseDay: "0",
      folwDatas: {},
      value1: "",
      value2: "",
      value3: "",
      message: ""
    };
  },
  created() {
    this.getToday();
  },
  mounted: function() {
    this.startInfo();
    this.stationHours();
  },
  computed: {
    therouter: function() {
      return this.$route;
    }
  },
  methods: {
    startInfo() {
      let _self = this;
      axios
        .get(BASEURL + "getEmp", {
          params: {
            hyCode: _self.$route.query.hy_code
          }
        })
        .then(res => {
          _self.stationInfo = res.data.emp;
        })
        .catch(error => {
          console.log(error);
        });
    },
    stationHours() {
      let _self = this;
      axios
        .get(BASEURL + "getFlowListTime", {
          params: {
            hyCode: _self.$route.query.hy_code,
            time: _self.value1
          }
        })
        .then(res => {
          _self.folwDatas = res.data.flowList;
          _self.message = res.data.message;
        })
        .catch(error => {
          console.log(error);
        });
    },
    stationDay() {
      let _self = this;
      axios
        .get(BASEURL + "getFlowListDay", {
          params: {
            hyCode: _self.$route.query.hy_code,
            startTime: _self.value2,
            endTime: _self.value3
          }
        })
        .then(res => {
          _self.folwDatas = res.data.flowList;
          _self.message = res.data.message;
        })
        .catch(error => {
          console.log(error);
        });
    },
    bg: function(index) {
      this.changebg = index;
      this.chooseDay = index;
      if (index == 0) {
        this.stationHours();
      } else if (index == 1) {
        this.stationDay();
      }
    },
    getToday() {
      let now = new Date();
      let cmonth = now.getMonth() + 1;
      let day = now.getDate();
      if (cmonth < 10) cmonth = "0" + cmonth;
      if (day < 10) day = "0" + day;
      this.value1 = now.getFullYear() + "-" + cmonth + "-" + day;
      this.value2 = now.getFullYear() + "-" + cmonth + "-" + day;
      this.value3 = now.getFullYear() + "-" + cmonth + "-" + day;
    },
    showPlugin() {
      this.$vux.datetime.show({
        cancelText: "取消",
        confirmText: "确定",
        format: "YYYY-MM-DD",
        value: "2017-05-20",
      });
    },
    changeHour() {
      this.stationHours();
    },
    changeStart() {
      this.stationDay();
    },
    changeEnd() {
      this.stationDay();
    }
  }
};
</script>
<style lang='scss' scoped>
.monitor-datas {
  margin-top: 1rem;
  .monitor-details {
    background: #fff;
    padding-left: 0.5rem;
    .station-info {
      padding: 0.225rem 0;
      border-bottom: 0.025rem solid #ddd;
      font-size: 0.35rem;
      color: #666;
    }
    .station-pic {
      float: left;
      width: 1.7rem;
      height: 2.05rem;
      margin-left: 0.5rem;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .station-mesg {
      margin-left: 3.2rem;
      text-align: left;
      p {
        height: 0.7rem;
        line-height: 0.7rem;
      }
      .station-name {
        font-size: 0.4rem;
        color: #333;
      }
    }
  }
  .num-message {
    padding: 0.375rem 0;
    text-align: left;
    background: #fff;
    li {
      float: left;
      width: 33.33%;
    }
    .flow-num {
      display: block;
      padding-left: 0.6rem;
      height: 0.6rem;
      line-height: 0.6rem;
      font-size: 0.25rem;
      color: #333;
      em {
        font-size: 0.5rem;
        font-family: "reducto_condensed_ssiCn";
        font-style: normal;
      }
      .num-red {
        color: #ff7843;
      }
      .num-green {
        color: #2cbf67;
      }
    }
    .flow-name {
      padding-left: 0.6rem;
      height: 0.6rem;
      line-height: 0.6rem;
      font-size: 0.35rem;
      color: #666;
    }
    .right-line {
      float: right;
      height: 0.6rem;
      width: 0.025rem;
      margin-top: 0.3rem;
      background: #ddd;
    }
  }
  .look-over {
    margin-top: 0.25rem;
    background: #fff;
    text-align: left;
    li {
      height: 1rem;
      line-height: 1rem;
      padding: 0 0.5rem;
      font-size: 0.375rem;
      color: #666;
      i {
        display: inline-block;
        vertical-align: middle;
      }
      .monitor-data {
        width: 0.55rem;
        height: 0.4rem;
        margin-right: 0.1rem;
        background: url(../../static/img/monitor-data.png) no-repeat center;
        background-size: 100% 100%;
      }
      .select-time {
        width: 0.4rem;
        height: 0.375rem;
        margin-right: 0.175rem;
        background: url(../../static/img/select-time.png) no-repeat center;
        background-size: 100% 100%;
      }
    }
    .first-line {
      font-size: 0.4rem;
      color: #333;
      border-bottom: 0.025rem solid #ddd;
    }
    .select-model {
      float: right;
      width: 2rem;
      height: 0.5rem;
      line-height: 0.5rem;
      border-radius: 0.15rem;
      background: #f7f7f7;
      margin-top: 0.25rem;
      font-size: 0.35rem;
      button {
        width: 1rem;
        height: 0.5rem;
        line-height: 0.5rem;
        outline: none;
        border: none;
        color: #999;
      }
      button:first-child {
        border-top-left-radius: 0.15rem;
        border-bottom-left-radius: 0.15rem;
      }
      button:last-child {
        border-top-right-radius: 0.15rem;
        border-bottom-right-radius: 0.15rem;
      }
      .active {
        color: #fff;
        background: #5dbcf9;
      }
    }
    .change-time {
      float: right;
    }
    .now-data {
      float: right;
      color: #333;
      .weui-cell_access .weui-cell__ft {
        padding-right: 0 !important;
      }
    }
    .start-time {
      margin-right: 0.5rem;
    }
  }
  .show-name {
    margin-top: 0.13rem;
    padding: 0 0.5rem;
    border-bottom: 0.025rem solid #ddd;
    background: #fff;
    li {
      float: left;
      height: 1rem;
      line-height: 1rem;
      font-size: 0.35rem;
      text-align: center;
      color: #666;
    }
    .one-w {
      width: 20%;
    }

    .two-w {
      width: 52%;
    }

    .three-w {
      width: 28%;
    }
  }
  .no-message{
    height: 5rem;
    line-height: 5rem;
    background: #fff;
    font-size: .45rem;
    color: #999;
  }
  .datas-show {
    padding: 0 0.5rem;
    background: #fff;
  }
  .datas-list {
    width: 100%;
    td {
      height: 1rem;
      line-height: 1rem;
      font-size: 0.35rem;
      text-align: center;
      color: #333;
      border-bottom: 0.025rem solid #ddd;
    }
  }
}
</style>